<template>
  <div>
    <div style="padding:15px 0;">
      <span>产品名称：</span>
      <Input v-model="name" placeholder="请输入产品名称" clearable style="width: 200px" />
      <Button type="primary" @click="init">查询</Button>
      <Button type="success" @click="add">新建</Button>
    </div>
    <Table border :columns="columns1" :data="data1">
      <template slot-scope="{ row, index }" slot="action">
        <Button type="error" size="small" @click="remove(row.id)">删除</Button>
      </template>
    </Table>
    <div style="text-align:right;margin-top:15px;" v-if="data1.length">
      <Page :total="totalPage" :page-size="10" @on-change="pageChange" />
    </div>
    <!-- popup -->
    <Modal v-model="modal1" :loading="loading" title="新建" @on-cancel="cancle">
      <section style="padding:15px 0;">
        <div style="margin-bottom:15px;">
          <span style="display:inline-block;width:5em;text-align:right;">产品名称：</span>
          <Input v-model="dataOut.productName" placeholder="请输入产品名称" clearable style="width: 200px" />
        </div>
        <div>
          <span style="display:inline-block;width:5em;text-align:right;">个数：</span>
          <Input v-model="dataOut.count" placeholder="请输入产品个数" type="number" clearable style="width: 200px" />
        </div>
      </section>
      <div slot="footer">
        <Button type="default" @click="cancle">取消</Button>
        <Button type="primary" @click="ok">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      name: '',
      modal1: false,
      loading: true,
      totalPage: 1,
      pageNo: 1,
      dataOut: {
        productName: '',
        count: ''
      },
      columns1: [
        {
          title: '序号',
          key: 'id'
        },
        {
          title: '产品名称',
          key: 'productName'
        },
        {
          title: '个数',
          key: 'count'
        },
        {
          title: '创建时间',
          key: 'createTime',
          render: function (h, params) {
            return h('div',
              new Date(this.row.createTime).Format('yyyy-MM-dd hh:mm:ss'));/*这里的this.row能够获取当前行的数据*/
          },
        },
        {
          title: '更新时间',
          key: 'updateTime',
          render: function (h, params) {
            return h('div',
              new Date(this.row.createTime).Format('yyyy-MM-dd hh:mm:ss'));/*这里的this.row能够获取当前行的数据*/
          },
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      data1: []
    }
  },
  methods: {
    add () {
      this.dataOut.productName = ''
      this.dataOut.count = ''
      this.modal1 = true
    },
    init () {
      this.$http({
        method: 'post',
        api: 'product/getPage',
        para: {
          productName: this.name,
          pageNo: this.pageNo
        }
      }).then((data) => {
        this.totalPage = data.total
        this.data1 = data.list
      });
    },
    pageChange (n) {
      this.pageNo = n
      this.init()
    },
    formatDate (timestramp) {
      return new Date(timestramp).Format('yyyy-MM-dd');
    },
    initFormatter () {
      Date.prototype.Format = function (fmt) { //
        let o = {
          "M+": this.getMonth() + 1,                 //月份
          "d+": this.getDate(),                    //日
          "h+": this.getHours(),                   //小时
          "m+": this.getMinutes(),                 //分
          "s+": this.getSeconds(),                 //秒
          "q+": Math.floor((this.getMonth() + 3) / 3), //季度
          "S": this.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt))
          fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
          if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
      }
    },
    cancle () {
      this.dataOut.productName = ''
      this.dataOut.count = ''
      this.modal1 = false
    },
    ok () {
      if (this.dataOut.productName == '') {
        this.$Message.error('请输入产品名称');
        return false
      }
      if (this.dataOut.count == '') {
        this.$Message.error('请输入产品数量');
        return false
      }
      this.$http({
        method: 'post',
        api: 'product/save',
        para: this.dataOut
      }).then((e) => {
        this.modal1 = false
        this.$Message.success('添加成功！')
        this.init()
      })
    },
    remove (id) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定删除该产品么？',
        onOk: () => {
          this.$http({
            method: 'post',
            api: 'product/delete',
            para: {
              id: id
            }
          }).then((e) => {
            this.$Message.success('删除成功！')
            this.init()
          })
        }
      });

    }
  },
  mounted () {
    this.init()
    this.initFormatter()
  }
}
</script>

